<template>
  <div style="width: 1000px">
    <el-table border class="inputcolumn" :data="selectedDataCopy" style="width: 1000px">

      <el-table-column prop="deviceImage" label="图片" align="center" width="100">
        <template slot-scope="scope">
          <el-image v-if="
            scope.row.itemMainImage != null && scope.row.itemMainImage != ''
          " slot="reference" :src="scope.row.itemMainImage" class="image-rows"
            :preview-src-list="[scope.row.itemMainImage]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="itemName" label="项目名称" width="100" align="left" />

      <el-table-column prop="itemName" label="sku" width="140" align="left">
        <template slot-scope="scope">
          <el-select   style="width: 100%;" v-model="scope.row.skuId" placeholder="请选择sku" size="small" v-if="scope.row.proboxServiceItemSkus &&
          scope.row.proboxServiceItemSkus.length > 0"
            @change="changeSku(scope.row.proboxServiceItemSkus, scope.row.skuId, scope.$index)">
            <!-- <el-option label="无" value="0" /> -->
            <el-option v-for="dict in  scope.row.proboxServiceItemSkus" :key="dict.skuId" :label="dict.skuName"
              :value="dict.skuId" />
          </el-select>
        </template>
      </el-table-column>

      <el-table-column label="面价" align="center" prop="itemPriceStr">
        <template slot-scope="scope">
          <el-input-number v-if="canDelete" style="width:100%;" :precision="2" :controls="false" :step="0.1" :min="0"
            :max="9999999" v-model="scope.row.itemPriceStr"></el-input-number>
          <span v-if="!canDelete">{{ scope.row.itemPriceStr }}</span>

        </template>
      </el-table-column>
      <!-- <el-table-column label="活动价格" align="center" prop="itemFavorablePriceStr">
        <template slot-scope="scope">
          <el-input-number v-if="canDelete" style="width:100%;" :precision="2" :controls="false" :step="0.1" :min="0.01"
            :max="9999999" v-model="scope.row.itemFavorablePriceStr"></el-input-number>
          <span v-if="!canDelete">{{scope.row.itemFavorablePriceStr}}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="结算价格" align="center" prop="itemSettlementPriceStr" v-if="0>1">
        <template slot-scope="scope">
          <el-input-number v-if="canDelete" style="width:100%;" :precision="2" :controls="false" :step="0.1" :min="0.01"
            :max="9999999" v-model="scope.row.itemSettlementPriceStr"></el-input-number>
          <span v-if="!canDelete">{{ scope.row.itemSettlementPriceStr }}</span>
        </template>
      </el-table-column>

      <el-table-column label="一叠价" align="center" prop="itemFavorablePriceStr">
        <template slot-scope="scope">
          <el-input-number style="width:100%;" :precision="2" :controls="false" :step="0.1" :min="0.01" :max="9999999"
            v-model="scope.row.itemFavorablePriceStr"></el-input-number>
        </template>
      </el-table-column>

      <el-table-column label="二叠价" align="center" prop="luoluoPriceStr">
        <template slot-scope="scope">
          <el-input-number style="width:100%;" :precision="2" :controls="false" :step="0.1" :min="0.01" :max="9999999"
            v-model="scope.row.luoluoPriceStr"></el-input-number>
        </template>
      </el-table-column>

      <el-table-column label="三叠价" align="center" prop="baibaiPriceStr">
        <template slot-scope="scope">
          <el-input-number style="width:100%;" :precision="2" :controls="false" :step="0.1" :min="0.01" :max="9999999"
            v-model="scope.row.baibaiPriceStr"></el-input-number>
        </template>
      </el-table-column>

      <!-- <el-table-column label="是否不限制数量" align="center" prop="isUnLimit">
        <template slot-scope="scope">
          <div v-if="canDelete">
            <el-radio style="padding-left: 12px;" v-model="scope.row.isUnLimit" label="1">不限制</el-radio>
            <el-radio v-model="scope.row.isUnLimit" label="0">限制</el-radio>
          </div>
          <div v-if="!canDelete">
            {{scope.row.isUnLimit == '0' ? '限制':'不限制'}}
          </div>
        </template>
      </el-table-column> -->

      <!-- <el-table-column label="库存" align="center" prop="amount">
        <template slot-scope="scope">
          <span v-if="scope.row.isUnLimit == 1">
            0
          </span>
          <el-input-number v-if="scope.row.isUnLimit == 0 && canDelete" style="width:100px;" :controls="false"
            :precision="0" :step="0" :min="1" :max="999" v-model="scope.row.amount"></el-input-number>
          <span v-if="scope.row.isUnLimit == 0 && !canDelete">
            {{scope.row.amount}}
          </span>
        </template>
      </el-table-column> -->



      <el-table-column align="center" prop="receiveNumber" label="操作" v-if="canDelete">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDeleteser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total > 0" :total="total" :page-sizes="pageSizess" :page.sync="pageNum" :limit.sync="pageSize"
      @pagination="getList" />



  </div>
</template>
<script>
import {
  delDdl
}
  from '@/api/service/card'
export default {
  props: {
    selectedData: {
      type: Array,
      default: function () {
        return []
      }
    },
    canDelete: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      selectedDataCopy: [],
      total: this.selectedData.length,
      pageSizess: [5, 10, 15, 20, 25, 30, 50],
      pageNum: 1,
      pageSize: 5,

    }
  },

  created() {
    if (this.total > 0) {
      this.getList();
    }
  },
  methods: {
    changeSku(list, id, index) {
      if (id == 0) {
        let dataCopy = this.selectedDataCopy[index];
        dataCopy.itemPriceStr = 0.01
        // dataCopy.itemFavorablePriceStr = 0.01
        dataCopy.itemSettlementPriceStr = 0.01
        this.selectedDataCopy[index] = dataCopy;
      } else {
        if (list && list.length > 0) {
          let data = {}
          list.forEach(vo => {
            if (vo.skuId == id) {
              data = vo;
            }
          })
          let dataCopy = this.selectedDataCopy[index];
          dataCopy.itemPriceStr = data.itemPrice/100
          // dataCopy.itemFavorablePriceStr = data.itemFavorablePrice/100
          dataCopy.itemSettlementPriceStr = data.itemSettlementPrice/100
          this.selectedDataCopy[index] = dataCopy;
        } else {
          let dataCopy = this.selectedDataCopy[index];
          dataCopy.itemPriceStr = 0.01
          // dataCopy.itemFavorablePriceStr = 0.01
          dataCopy.itemSettlementPriceStr = 0.01
          this.selectedDataCopy[index] = dataCopy;
        }

      }

    },
    getList() {
      this.selectedDataCopy = [];
      let startNum = (this.pageNum - 1) * this.pageSize;
      let endNum = this.pageNum * this.pageSize;
      /*if($this.pageNum == 1){
        num =  $this.pageNum * $this.pageSize;
      }*/
      this.total = this.selectedData.length

      this.selectedData.forEach((data, index) => {
        if (index >= startNum && index < endNum) {
          if(data.isUnLimit == null){
          data.isUnLimit= '1' 
         }

          this.selectedDataCopy.push(data);
        }
      })
      if (this.selectedDataCopy.length == 0) {
        if (this.pageNum > 1) {
          this.pageNum = this.pageNum - 1
          this.getList()
        }
      }
    },
    handleDeleteser(val, row) {
      // 模态框删除按钮
      this.$confirm("是否确认删除本条数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
      }).then(() => {
        console.log(row)
        if (row.detailId == null) {
          this.msgSuccess("删除成功");
          let index = null
          this.selectedData.forEach((item, idx) => {
            if (item.itemId == row.itemId) {

              index = idx
            }
          })
          this.selectedData.splice(index, 1);
          this.getList();

        } else {
          delDdl(row.detailId).then(response => {
            this.msgSuccess("删除成功");
            let index = null
            this.selectedData.forEach((item, idx) => {
              if (item.itemId == row.itemId) {

                index = idx
              }
            })
            this.selectedData.splice(index, 1);
            this.getList();
          });
        }


      });
    },
  },
};
</script>
